<template>
    <div class="pannel left-border-1">
       <div class="pannel-title">
        实时视频监控
       </div>
       <div class="pannel-sub-title">
        Real time video surveillance
       </div>
       <div class="camera-list">
        <div class="camera-box" v-for="item in cameraList" :key="item.deviceId"> 
          <video :id="item.deviceId" class="camera-box-camera" muted autoplay loop controls></video>
          <div class="camera-box-text">
            <span v-bind:class="[item.onlineState =='1' ? 'camera-status-up' : 'camera-status-down']">●</span>
            <span class="camera-location">{{ item.cameraName }}</span><span class="camera-time">{{ item.availableTime.slice(11)}}</span>  
          </div>
        </div>
       </div>
    </div>
  </template>
  
  <script>
  import { mapActions, mapGetters } from 'vuex';
  export default {
    name: 'camera-list',
    computed :{
        ...mapGetters('camera',['cameraList','rtcServers'])
    },
    mounted(){
        //根据参数查询摄像头
        //let payload={loc: '103.503143,31.128029'}
        this.loadCameras();
    },
    methods: {
        ...mapActions('camera',['loadCameras','initCameras']),
    },
    watch : {
      cameraList : function(){
        this.$nextTick(()=>{
          if(this.cameraList != null && this.cameraList.length>0){
            let rtcServers=[];
            this.cameraList.forEach(el=> {
                if(el.streamType =='rtsp'){
                    // eslint-disable-next-line
                    let rtcServer= new WebRtcStreamer(el.deviceId,"http://127.0.0.1:9001");
                    //需要看的rtsp视频地址，可以在网上找在线的rtsp视频地址来进行demo实验，在vlc中能播放就能用
                    //例如：http://220.161.87.62:8800/hls/0/index.m3u8
                    rtcServer.connect(el.cameraUrl);
                    rtcServers.push(rtcServer);
                }
            });
            this.initCameras(rtcServers);
          }
        });
      }
    },
    beforeDestroy(){
      if(this.rtcServers){
        this.rtcServers.forEach(server =>{
          server.disconnect();
        });
      }
    }
  };
  </script>
  
  <style lang="less">
    .left-border-1 {
        box-sizing: border-box;
        border-width: 4px;
        border-style: solid;
        border-color: rgba(135, 247, 199, 1);
        border-top: 0px;
        border-right: 0px;
        border-bottom: 0px;
        border-radius: 0px;
    }
    .camera-list {
      padding: 5px 2px 2px 5px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      .camera-box {
        width: 169px;
        height: 109px;
        display: flex;
        flex-direction: column;
        .camera-box-camera {
          width: 100%;
        }
        .camera-box-text {
          background: #2f2d2d;
          font-size: 12px;
          font-family: 'Arial Normal', 'Arial', sans-serif;
          font-weight: 400;
          font-style: normal;
          color: rgba(255, 255, 255, 0.58);
          display: flex;
          line-height: 20px;
          -webkit-text-size-adjust:none;
          flex-direction: row;
          .camera-status-up {
            padding-left: 5px;
            font-size:16px;
            color:rgba(17, 228, 138, 0.65);
          }
          .camera-status-down {
            padding-left: 5px;
            font-size:16px;
            color:rgba(244, 28, 4, 0.65);
            vertical-align:middle;
          }
          .camera-location {
            padding-left: 5px;
            white-space: nowrap;
          }
          .camera-time {
            padding-right: 5px;
            margin-left: auto;
          }
        }
      }
    }
  </style>